<template>
	<div>
		<div style="margin-bottom: 20px;">
			<el-button type="primary" size="medium" plain @click="back">
				返回
			</el-button>
		</div>
		<div class="addMaterial" v-if="isAddShow">
			<el-form :model="materialForm" inline :rules="rules" ref="ruleForm" label-position="left">
				<el-form-item label="标题" prop="title">
					<el-input type="text" style="width: 300px;" v-model="materialForm.title"
						placeholder="输入标题"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<el-select v-model="materialForm.type" placeholder="请选择类型">
						<el-option v-for="item in materiaType" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上传视频" prop="videoUrl">
					<el-upload class="avatar-uploader el-upload--text" :action="uploadVideo" :show-file-list="false"
						:on-success="handleVideoSuccess" :before-upload="beforeUploadVideo"
						:on-progress="uploadVideoProcess">
						<el-button :disabled="videoFlag" size="small" :type="buttonType">
							{{ buttonValue }}
						</el-button>
					</el-upload>
					<el-progress v-if="videoFlag" :percentage="Number(videoUploadPercent)"
						style="width: 200px;"></el-progress>
				</el-form-item>
			</el-form>
			<div>内容</div>
			<div style="margin: 10px 0;">
				<!-- <RichTextEditor style="height: 400px;" @update-content="updateContent" :src="IMG_URL" ref="RichTextEditor">
				</RichTextEditor> -->
				<RichTextEditorPlus ref="RTE"></RichTextEditorPlus>
			</div>
			<div>
				<el-button type="primary" @click="submitForm('ruleForm')" v-debounce>
					提交
				</el-button>
				<el-button @click="resetForm">重置</el-button>
			</div>
		</div>
		<!-- 详情 -->
		<div class="detail" v-if="!isAddShow" style="width: 71%;">
			<div style="font-size: 20px;font-weight: bold;">{{ material.title }}</div>
			<div style="margin: 10px 0;display: flex; color: #9499a9;">
				<!-- 浏览次数 -->
				<div>
					<i class="el-icon-view"></i>
					<span style="margin-left: 5px;">{{ material.viewCount }}次</span>
				</div>
				<!-- 发布时间 -->
				<div style="margin-left: 10px;">
					<i class="el-icon-time"></i>
					<span style="margin-left: 5px;">{{ material.createTime }}</span>
				</div>
				<!-- 发布人 -->
				<div style="margin-left: 10px;">
					<i class="el-icon-user"></i>
					<span style="margin-left: 5px;">{{ material.nikeName }}</span>
				</div>
			</div>
			<!-- 视频 -->
			<video v-if="material.videoUrl !== '' && material.videoUrl !== null" height="450px"
				:src="videoUrl + material.videoUrl" controls style="margin: 10px 0;"></video>
			<!-- 内容 -->
			<div class="content" style="margin: 20px 0;" v-html="material.content"></div>
			<!-- 评论 -->
			<div>
				<div style="font-size: 18px;font-weight: bold;margin: 10px 0;">评论</div>
				<div v-if="comment.length > 0" v-infinite-scroll="load" :infinite-scroll-distance="50"
					:infinite-scroll-delay="300">
					<div style="display: flex; margin-bottom: 10px;" v-for="(item, index) in comment" :key="index">
						<!-- 头像 -->
						<div style="width: 50px;">
							<el-avatar size="medium" :src="imageUrl + item.image"></el-avatar>
						</div>
						<div style="flex: 1;">
							<div style="width: 100%;margin: 5px 0 10px 0;">
								<span>{{ item.userName }}</span>

							</div>
							<div class="comment-textarea">
								<el-input type="textarea" v-model="item.content" autosize readonly
									style="border: none;">
								</el-input>
							</div>
							<div style="color: #9499a9;display: flex;justify-content: space-between;">
								<div>
									<span>{{ item.createTime }}</span>
								</div>
								<div @click="deleteComment(item)" v-if="userInfo.roleId === '1'">
									<i class="el-icon-close"></i>
								</div>
							</div>
							<div style="width: 100%;height: 10px; border-bottom: 1px #e3e5e7 solid;"
								v-if="index !== comment.length - 1">
							</div>
						</div>
					</div>
				</div>
				<div v-else>
					<span>暂无评论</span>
				</div>
				<div style="width: 100%;text-align: center; color: #9499a9;">
					<span>————已经到底啦————</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import apiURL from "../../../api/apiURL.js"
import api from "../../../api/companyCulture.js"
import RichTextEditorPlus from "../../../components/RichTextEditorPlus.vue";
// import RichTextEditor from "../../../components/RichTextEditor.vue"
export default {
	components: {
		// RichTextEditor
		RichTextEditorPlus
	},
	data() {
		return {
			userInfo: {},
			noData: true,
			isAddShow: true,
			materialForm: {
				title: '', //标题
				type: 0, //类型
				content: '', // 内容
				imageUrl: '', // 图片地址
				videoUrl: '', // 视频地址
			},
			// 类型
			materiaType: [{
				label: '学习资料',
				value: 0
			},
			{
				label: '培训视频',
				value: 1
			},
			{
				label: '会议视频',
				value: 2
			},
			{
				label: '公司介绍',
				value: 3
			},
			{
				label: '管理制度',
				value: 4
			}
			],
			buttonValue: '点击上传',
			buttonType: 'primary',
			uploadSuccess: false,
			videoUploadPercent: 0,
			videoFlag: false,
			IMG_URL: apiURL.IMG_URL, //图片上传地址
			uploadVideo: apiURL.VIDEO_URL, // 视频上传地址
			rules: {
				title: [{
					required: true,
					message: '请输入标题',
					trigger: 'blur'
				}]
			},
			material: {},
			videoUrl: apiURL.READ_VIDEO_URL,
			imageUrl: apiURL.READ_IMG_URL,
			comment: [],
			// 分页大小
			pageSize: 10,
			//记录当前页数
			currentPage: 1,
		};
	},
	created() {
		this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
		let materialId = localStorage.getItem("materialId")
		console.log("id===>", materialId)
		if (materialId) {
			this.isAddShow = false
			this.getMaterial(materialId);
		}
	},
	destroyed() {
		localStorage.removeItem("materialId")
	},
	methods: {
		// 返回
		back() {
			this.$router.push({
				path: "/companyCulture/material"
			})
		},
		// 获取资料
		getMaterial(id) {
			const loading = this.$loading({
				lock: true,
				text: 'Loading...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			const data = {
				id: id
			}
			api.getMaterial(data).then(res => {
				if (res.code === 200) {
					this.material = res.data
					this.getComment(this.material.id)
				}
			}).finally(() => {
				loading.close();
			})
		},
		// 富文本传值
		updateContent(data) {
			this.materialForm.content = data.content
			this.materialForm.imageUrl = data.imageList
			//console.log("data===>", data)
		},
		// 提交
		submitForm(formName) {
			this.materialForm.content = this.$refs.RTE.getHTMLText()
			this.$refs[formName].validate((valid) => {
				if (!valid) {
					this.$message.error("请将表单填写完整！")
					return false;
				}
				this.$confirm('确定要提交吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//console.log("提交表单=>",this.materialForm)
					const loading = this.$loading({
						lock: true,
						text: '请求中...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					api.addMaterial(this.materialForm).then(res => {
						if (res.code === 200) {
							this.$message.success("提交成功！")
							this.resetForm()
						} else {
							this.$message.error("提交失败！")
						}
					}).finally(() => {
						loading.close();
					})
				})
			});
		},
		resetForm() {
			this.materialForm.title = '';
			this.materialForm.type = 0;
			//this.materialForm.content = '';
			this.$refs.RichTextEditor.clear()
			this.materialForm.imageUrl = '';
			this.materialForm.videoUrl = '';
			this.buttonValue = '点击上传';
			this.buttonType = 'primary';
		},
		// 上传视频验证
		beforeUploadVideo(file) {
			const isLt10M = file.size / 1024 / 1024 < 500;
			if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -
				1) {
				this.$message.error('请上传正确的视频格式');
				return false;
			}
			if (!isLt10M) {
				this.$message.error('上传视频大小不能超过500MB哦!');
				return false;
			}

		},
		// 上传进度
		uploadVideoProcess(event, file) {
			this.videoFlag = true;
			this.videoUploadPercent = file.percentage.toFixed(0);
		},
		// 上传视频成功
		handleVideoSuccess(res) {
			this.buttonValue = '重新上传';
			this.videoFlag = false;
			this.videoUploadPercent = 0;
			console.log("videoUrl===>", res.data)
			if (res.code == 200) {
				this.$message.success('视频上传成功！');
				this.buttonType = 'success'
				this.materialForm.videoUrl = res.data;
			} else {
				this.$message.error('视频上传失败，请重新上传！');
				this.buttonType = 'danger'
			}
		},
		// 获取资料
		// getMaterial(id){
		// 	console.log("id==>",id)
		// 	const data = {
		// 		id: id
		// 	}
		// 	api.getMaterial(data).then(res =>{
		// 		if (res.code === 200){
		// 			console.log("data===>",res.data)
		// 			this.material = res.data
		// 		}
		// 	})
		// 	console.log(this.material)
		// },
		// 获取评论
		getComment(id) {
			let data = {
				materialId: id,
				currentPage: this.currentPage,
				pageSize: this.pageSize
			}
			api.getComment(data).then(res => {
				if (res.code === 200) {
					if (res.data.length === 0) {
						this.noData = false
						return
					}
					res.data.forEach(item => {
						this.comment.push(item)
					})
				}
			})
		},
		// 删除评论
		deleteComment(item) {
			this.$confirm("确定要删除该评论吗？", "提示", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				console.log("用户点击确定");
				api.deleteUserComment(item).then(res => {
					if (res.code === 200) {
						// 从数组中删除
						const index = this.comment.findIndex(obj => obj.id === item.id);
						this.comment.splice(index, 1);
						this.$message.success("删除成功");
					}
				})
			}).catch(() => {
				console.log("用户点击取消");
			})
		},
		// 到底部刷新
		load() {
			if (this.noData) {
				this.currentPage += 1
				this.getComment(this.material.id);
			}
		}
	}
}
</script>

<style scoped>
.content img {
	width: 100%;
	height: 100%;
	margin: 1em 0 !important;
}

.comment-textarea>>>.el-textarea__inner {
	border: 0;
	resize: none;
	padding: 0;
}
</style>